<template>
  <div>
    <div class="header">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元免邮费</div>
    </div>
    <div class="list" v-for="item in list" :key="item.id">
      <van-swipe-cell>
        <div class="li">
          <van-checkbox
            v-model="item.isCheck"
            checked-color="rgb(180, 40, 45)"
          ></van-checkbox>
          <div class="img-box">
            <img :src="item.list_pic_url" alt="" />
          </div>
          <div class="text">
            <p class="name">{{ item.goods_name }}</p>
            <p class="price">{{ item.retail_price }}元</p>
          </div>
          <div class="number">x{{ item.number }}</div>
        </div>
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            class="delete-button"
            @click="deleteGood(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <div class="footer">
      <van-checkbox v-model="checkAll" checked-color="rgb(180, 40, 45)"
        >全选</van-checkbox
      >
      <div class="right">
        <div class="total">￥{{ total }}</div>
        <div class="submit">下单</div>
      </div>
    </div>
  </div>
</template>
<script>
import { carList, deleteGood } from "@/api/car";
import { Dialog } from "vant";

export default {
  data() {
    return {
      // checkAll: false,
      list: [],
    };
  },
  created() {
    let openId = localStorage.getItem("openId");
    carList({ openId: openId }).then((res) => {
      console.log(res);
      res.data.forEach((el) => {
        el.isCheck = false;
      });
      this.list = res.data;
    });
  },
  methods: {
    deleteGood(id) {
      Dialog.confirm({
        message: "删除该商品",
      })
        .then(() => {
          // on confirm
          deleteGood({
            id: id,
          }).then((res) => {
            if (res.data) {
              let index = this.list.findIndex((el) => el.id == id);
              this.list.splice(index, 1);
            }
            console.log(res);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  computed: {
    checkAll: {
      get() {
        let all = this.list.every((el) => el.isCheck);
        return all;
        console.log(all);
      },
      set(e) {
        this.list.forEach((el) => (el.isCheck = e));
      },
    },
    total() {
      return this.list.reduce((n, p) => {
        if (p.isCheck) {
          return n + p.retail_price * p.number;
        } else {
          return n;
        }
      }, 0);
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  line-height: 40px;
  background-color: #f4f4f4;
}
.delete-button {
  height: 100%;
}
.li {
  height: 100px;
  border-bottom: 1px solid #f4f4f4;
  background-color: #fff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  .img-box {
    width: 65px;
    height: 65px;
    background-color: #f4f4f4;
    margin: 0 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .text {
    height: 65px;
    box-sizing: border-box;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      padding: 0;
      margin: 0;
    }
  }
  .number {
    line-height: 65px;
    margin: 0 20px 0 auto;
  }
}
.footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 50px;
  background-color: #fff;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 10px;
  .right {
    height: 100%;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    .submit {
      width: 100px;
      font-size: 14px;
      text-align: center;
      background: #b4282d;
      color: #fff;
    }
    .total {
      color: #b4282d;
      margin-right: 10px;
    }
  }
}
</style>
